<template>
<div><el-form ref="form" :model="form" label-width="120px">


  <el-form-item label="上传广告图片" :label-width="formLabelWidth">
    <el-upload
      class="avatar-uploader"
      action="http://47.107.159.133:80/img/"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </el-form-item>
  <el-form-item label="选择对应的类型和商品: " :label-width="formLabelWidth">
    <template>
      <el-select v-model="listPostSeckill.categoryId" @change="categoryListTypes(listPostSeckill.categoryId)" placeholder="请选择大类">
        <el-option
          v-for="item in categoryGoodsAddList"
          :key="item.categoryId"
          :label="item.categoryName"
          :value="item.categoryId"
        >
        </el-option>
      </el-select>
    </template>
    <template>
      <el-select v-model="listPostSeckill.goodsType" @change="typesListGoods(listPostSeckill.goodsType)" placeholder="请选择小类">
        <el-option
          v-for="item in typesGoodsAddList"
          :key="item.typeId"
          :label="item.typeName"
          :value="item.typeId">
        </el-option>
      </el-select>
    </template>

    <template>
      <el-select v-model="listPostSeckill.goodsId" placeholder="请选择商品">
        <el-option
          v-for="item in GoodsAddList"
          :key="item.goodsId"
          :label="item.goodsName"
          :value="item.goodsId">
        </el-option>
      </el-select>
    </template>
  </el-form-item>



<!--  <el-form-item label="对应商品" >-->
<!--      <el-input class="width" v-model="form.id"></el-input>-->
<!--      <el-input class="width" v-model="imageId"></el-input>-->
<!--  </el-form-item>-->

  <el-form-item>
    <el-button type="primary" @click="onSubmit(listPostSeckill.goodsId,imageId)">立即添加</el-button>
  </el-form-item>
</el-form>

</div>
</template>

<script>
// import { getList } from '@/api/table'
import { advertisingPost } from '@/api/server-advertisement'
import { categoryList,typesCategoryId } from '@/api/server-goods'
import { goodsTypesId } from '@/api/server-seckill'

export default {
  data() {
    return {

        //用了秒杀同样的处理方法
      listPostSeckill: { //添加秒杀商品时提交的数据
        categoryId:null,
        goodsType:null,
        TimeData:null,   //秒杀时间(日期)
        startTime1:null,   //开始秒杀时间
        endTime1:null,     //结束秒杀时间
        number: null,     //秒杀商品的总件数
        goodsId: null

      },
      categoryGoodsAddList:null, //所有大类(添加秒杀商品)
      typesGoodsAddList:null, //对应的小类(添加秒杀商品)
      GoodsAddList:null,  //对应的商品（添加秒杀商品）
      formLabelWidth: '160px',
      fileApi: null,
      form: {
        id: '',
      },
      imageUrl: '',
      imageId: ''

    }
  },
  created() {
    this.fetchData()
  },
  methods: {


    //点击小类触发对应商品
    typesListGoods(id){
      let that = this;
      that.GoodsAddList = null;
      goodsTypesId(id,function (msg) {
        console.log(msg.data)
        that.GoodsAddList = msg.data;
      })
    },

    //点击大类触发对应小类
    categoryListTypes(id){
      let that = this;
      that.typesGoodsAddList = null;
      typesCategoryId(id,function (msg) {
        that.typesGoodsAddList = msg.data;
      })
    },


    handleAvatarSuccess(res, file) {
     /* this.imageUrl = URL.createObjectURL(file.raw);*/
       this.imageUrl = res.data.imgUrl
       this.imageId = res.data.imgId
    },
    beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

   /* UploadImage (param) {
      let fd = new FormData()
      console.log(param)
      console.log("如下")
      console.log(param);
      console.log('param.file',param.file)
      fd.append('file', param.file) // 要提交给后台的文件
      console.log(fd);
      UploadFiles(fd).then(response => {  // UploadFiles 是封装的接口

      })
    },


    handleAvatarSuccess(res,file){
      var than = this;
      console.log(res);
      console.log(file);
      than.fileApi = file;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type ;
      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!(isJPG === 'image/png' || isJPG === 'image/jpeg')) {
        this.$message.error('上传图片只能是 jpg或者png 格式!');
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt5M;
    },

    handleExceed(files) {
      this.$message.warning(`每一次只能添加一张图片,如果上传错误请点击下面绿色√移除`);
      console.log(files);
      // this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },*/


    onSubmit(goodsId,imageId) {
      advertisingPost(goodsId,imageId,function(msg){
          if(msg.msg == '添加成功'){
            alert('添加成功')
          }
      })

    },

    //自动刷新
    fetchData() {
      let that = this;
      categoryList(function(msg){
        that.categoryGoodsAddList = msg.data;
        console.log("categoryGoodsAddList");
        console.log(that.categoryGoodsAddList);


      })


      // this.listLoading = true
      // getList().then(response => {
      //   this.list = response.data.items
      //   this.listLoading = false
      // })
    }
  }
}
</script>

<style>
  .width{
    width: 260px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
